<template>
  <div>
    <el-container class="container-0">
      <el-header>
        <h2>讲师列表</h2>
      </el-header>
      <el-main>
        <div style="display: flex; flex-direction: column; height: 100%">
          <div class="search">
            <el-input
              v-model.trim="highQuery.name"
              clearable
              size="small"
              style="width: 200px"
              placeholder="名称"
            />
            <!-- <el-input v-model.trim="highQuery.level" clearable size="small" style="width: 200px" placeholder="等级" /> -->
            <el-select
              v-model="highQuery.level"
              size="small"
              clearable
              placeholder="等级"
            >
              <el-option
                v-for="item in levelOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <span>入职时间: </span>
            <el-date-picker
              v-model="highQuery.start"
              size="small"
              type="date"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="起始"
            ></el-date-picker>
            <span>至</span>
            <el-date-picker
              v-model="highQuery.end"
              size="small"
              type="date"
              clearable
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="终止"
            ></el-date-picker>
            <div>
              <el-button size="small" @click="handleSearch">查询</el-button>
              <el-button size="small" @click="handleReset">清空</el-button>
            </div>
          </div>
          <div style="flex: 1">
            <PageTable
              :tableData="list"
              :tableCols="cols"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              showButton
            >
              <template #buttons="{ row }">
                <el-button type="text" size="mini" @click="handlerUpdate(row)"
                  >更新</el-button
                >
                <el-button type="text" size="mini" @click="handleRemove(row)"
                  >删除</el-button
                >
              </template>
            </PageTable>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { teacherCols } from "@/views/edu/cols";
import { tableMixin } from "@/components/PageTable/mixin";

export default {
  name: "list",
  mixins: [tableMixin],
  data() {
    return {
      cols: teacherCols,
      list: [],
      levelOptions: [
        { value: "1", label: "高级讲师" },
        { value: "2", label: "首席讲师" },
      ],
      highQuery: {
        name: "",
        lavel: "",
        start: "",
        end: "",
      },
    };
  },
  beforeMount() {
    this.getList();
    document.addEventListener("keyup", (e) => {
      if (e.code === "Enter") {
        this.getList();
      }
    });
  },
  methods: {
    getList() {
      let { current, pageSize } = this.queryParam;
      this.$api.api_edu.queryEduTeacher(current, pageSize, this.highQuery).then((res) => {
        this.list = (res.data && res.data.data) || [];
        this.total = this.list.length;
      });
    },
    handleSearch() {
      this.getList();
    },
    handleReset() {
      this.highQuery = {
        name: "",
        lavel: "",
        start: "",
        end: "",
      };
      this.getList();
    },
    handleRemove(row) {
      this.$api.api_edu.deleteById(row.id).then((res) => {
        if (res.success) {
          this.$message.success("删除成功");
          this.getList();
        }
      });
    },
    handlerUpdate(row) {
      this.$router.push({ path: "/eduTeacher/add", query: { id: row.id } });
    },
  },
};
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  > * {
    margin-left: 8px;
  }
  > span {
    line-height: 32px;
  }
}
</style>